<template>
  <div class="app-container">
    <el-row class="wrapper alarm">
      <el-col :span="24" class="warp-main">
        <div class="el-bar">
          <!--工具条-->
          <el-col :span="24" class="toolbar" style="padding-top:10px">
            <el-form :inline="true">
              <el-form-item>
                <el-select style="width: 150px;" v-model="selectStaus" placeholder="请选择状态">
                  <el-option v-for="item in status" :key="item.value" :label="item.label" :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item>
                <el-select style="width: 150px;" v-model="selectLevel" placeholder="请选择预警级别">
                  <el-option v-for="item in level" :key="item.value" :label="item.label" :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item>
                <el-date-picker :editable="false" v-model="times" type="datetimerange" :picker-options="pickerOptions2" placeholder="选择时间范围" align="right">
                </el-date-picker>
              </el-form-item>
              <el-form-item>
                <el-input v-model="queryKey" placeholder="关键字(针对预警内容)">
                  <i slot="prefix" class="el-input__icon el-icon-search"></i>
                </el-input>
              </el-form-item>

              <el-form-item>
                <el-button icon="el-icon-search" @click="alarmDataQuery" type="primary">查询</el-button>
              </el-form-item>
            </el-form>
          </el-col>

          <!--page页的按钮-->
          <el-col :span="24" class="toolbar" style="margin-top:10px;">
            <!-- <el-pagination layout="total, sizes, prev, pager, next, jumper" :total="40" style="float:right;">
                                                                                                                                  </el-pagination> -->
            <el-pagination @current-change="currentChange" style="text-align: right" layout="prev,pager,next,total" :total="total" :page-count="totalPage">
            </el-pagination>
          </el-col>
          <!--数据列表-->
          <el-table v-loading="loadingWarningDataTable" :data="alarmData" highlight-current-row style="width: 100%;">
            <el-table-column :show-overflow-tooltip="true" prop="time" label="时间" sortable></el-table-column>
            <el-table-column :show-overflow-tooltip="true" prop="alarmMsg" label="预警内容" sortable></el-table-column>
            <el-table-column :formatter="formatLevel" prop="alarmLevel" label="预警级别" sortable></el-table-column>
            <el-table-column :show-overflow-tooltip="true" :formatter="formatType" prop="alarmType" label="预警类型" sortable></el-table-column>
            <el-table-column :formatter="formatStatus" prop="alarmStatus" label="预警状态" sortable></el-table-column>
            <el-table-column :formatter="formatNamespace" prop="alarmNs" label="所属空间" sortable></el-table-column>
          </el-table>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import { Notification } from 'element-ui';
export default {
  data() {
    return {
      selectStaus: 0,
      status: [{
        value: -1,
        label: '全部'
      }, {
        value: 0,
        label: '未发送通知'
      }, {
        value: 1,
        label: '已发送通知'
      }],
      selectLevel: -1,
      level: [{
        value: -1,
        label: '全部'
      }, {
        value: 1,
        label: '最严重'
      }, {
        value: 2,
        label: '比较严重'
      }, {
        value: 3,
        label: '一般'
      }],
      times: [new Date(new Date().setHours(0, 0, 0, 0)), new Date()],
      //时间控件
      pickerOptions2: {
        shortcuts: [{
          text: '今天',
          onClick(picker) {
            const end = new Date();
            const start = new Date(new Date().setHours(0, 0, 0, 0))
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '昨天',
          onClick(picker) {
            const end = new Date(new Date(new Date().setDate(new Date().getDate() - 1)).setHours(23, 59, 59, 999));
            const start = new Date(new Date(new Date().setDate(new Date().getDate() - 1)).setHours(0, 0, 0, 0));
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一周',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
            picker.$emit('pick', [start, end]);
          }
        }]
      },
      //查询关键词
      queryKey: '',
      currentPage: 1,
      totalPage: 0,
      total:0,
      //预警数据
      alarmData: [
      ],
      // 预警任务查询遮罩
      loadingWarningDataTable: false,
    }
  },
  methods: {
    //预警数据查询
    alarmDataQuery() {
      if (this.times == '' || this.times == undefined) {
        Notification.warning({
          title: '温馨提示',
          message: '请选择时间'
        });
        return;
      }
      var url = this.projectConfig.URL_API_ALARM;
      var t1 = this.times + "";
      var ts = t1.split(',')[0];
      ts = ts.replace('GMT+0800 (中国标准时间)', 'GMT+08:00');
      var te = t1.split(',')[1];
      te = te.replace('GMT+0800 (中国标准时间)', 'GMT+08:00');
      let parm = {
        level: this.selectLevel,
        status: this.selectStaus,
        timeStart: ts,
        timeEnd: te,
        queryKey: this.queryKey,
        currentPage: this.currentPage
      }
      // 开启遮罩
      this.loadingWarningDataTable = true;
      this.httpClient.httpClientget(url, parm).then((response) => {
          // 遮罩结束
          this.loadingWarningDataTable = false;
        let data = response.data;
        let tp = data.totalPage;
        let dg = data.alarmData;
        this.totalPage = tp;
        this.alarmData = dg;
        this.total=data.total;
      }).catch(error => {
          // 遮罩结束
          this.loadingWarningDataTable = false;
      });
    },
    //页面变化
    currentChange: function(currentPage) {
      this.currentPage = currentPage;
      this.alarmDataQuery();
    },
    //格式化列表内容
    formatLevel: function(row, column, cellValue) {
      if (cellValue == 1) {
        return "最严重";
      }
      if (cellValue == 2) {
        return "比较严重";
      }
      if (cellValue == 3) {
        return "一般";
      }
    },
    formatType: function(row, column, cellValue) {
      if (cellValue == 0) {
        return "job异常告警";
      }
      if (cellValue == 1) {
        return "平台节点异常告警";
      }
      if (cellValue == 2) {
        return "平台应用异常告警";
      }
      if (cellValue == 3) {
        return "平台存储异常告警";
      }
      if (cellValue == 4) {
        return "空间应用异常告警";
      }
      if (cellValue == 5) {
        return "平台健康异常告警";
      }
      if (cellValue == 6) {
        return "团队统计异常告警";
      }
      if (cellValue == 7) {
        return "空间统计异常告警";
      }
      if (cellValue == 8) {
        return "平台镜像统计异常告警";
      }
      if (cellValue == 9) {
        return "空间镜像统计异常告警";
      }
    },
    formatStatus: function(row, column, cellValue) {
      if (cellValue == 0) {
        return "未发送通知";
      }
      if (cellValue == 1) {
        return "已发送通知";
      }
    },
    formatNamespace: function(row, column, cellValue) {
      if (cellValue == "all") {
        return "所有";
      } else {
        return cellValue;
      }
    }
  },
  mounted: function() {
    //查询预警数据
    this.alarmDataQuery();
  },
  watch: {
    selectStaus(val) {
      this.alarmDataQuery();
    },
    selectLevel(val) {
      this.alarmDataQuery();
    },
    times(val){
      this.alarmDataQuery();
    },
    queryKey(val){
      this.alarmDataQuery();
    }
  }
}
</script>

<style>
.alarm .el-table tr {
  text-align: center;
}

.alarm .el-time {
  border: 1px solid;
  border-radius: 4px;
}

.alarm .el-width {
  width: 400px;
}

.alarm .el-bar {
  padding-bottom: 50px;
}

.alarm .el-bar .nbd {
  border-bottom: none;
}

.alarm .el-dialog__header {
  padding: 20px 20px 10px;
  border-bottom: 1px solid #ccc;
}

.alarm el-icon-search {
  border: 1px solid #eaeaea;
  border-radius: 4px;
}

.opraalarmtion .search .el-input {
  border: 1px solid #eaeaea;
}

.alarm .el-date-editor--datetimerange {
  border: 1px solid #eaeaea;
  border-radius: 4px;
}

.alarm .el-table .cell {
  padding: 0;
}
</style>